<template>
  <div class="Blacklist-container" v-cloak>
    <!-- 栅格 输入框 和按钮 -->
    <el-row class="filterCondition">
      <el-form
        label-width="82px"
        label-position="right"
        ref="formLabelAlign"
        :model="formLabelAlign"
      >
        <el-form-item label="查询条件">
          <el-select v-model="formLabelAlign.applyType" @change="ChangeKind" placeholder="请选择查询条件">
            <el-option
              v-for="item in kindtimeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="查询信息">
          <el-input v-model="formLabelAlign.applyContent " placeholder="输入IP或手机号"></el-input>
        </el-form-item>
        <el-form-item id="btnList">
          <el-button
            style="background-color:#c73e3a;color:#fff"
            @click="checkCus"
            class="check"
            :disabled="disTBN"
          >查询</el-button>
          <el-button
            style="background-color:#008C5E;color:#fff"
            @click="centerDialogVisible = true;"
            class="check"
            :disabled="disTBN"
          >添加黑名单</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- table -->
    <!-- <el-table  @selection-change="changeCus" :row-class-name="tableRowClassName" :data="tableData" style="width: 100%" stripe> -->
    <el-table :data="tableData" style="width: 100%" v-loading="loading" stripe v-cloak>
      <el-table-column prop="applyType" label="黑名单类型" align="center">
        <template slot-scope="scope">
          <p>{{ scope.row.applyType　| panDuanType}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="applyContent" label="黑名单内容" align="center"></el-table-column>
      <el-table-column label="时间" align="center">
        <template slot-scope="scope">
          <p class="ell">{{ scope.row.createTime | formatTime }}</p>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120" align="center">
        <template slot-scope="scope">
            <el-button  @click.native.prevent="deleteRow(scope.$index, tableData)"  type="text"  size="small"><i class="el-icon-delete-solid"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageConfig.currentPage"
      :page-sizes="[10, 20 ,50]"
      :page-size="pageConfig.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageConfig.total"
    ></el-pagination>
    <!-- 新增黑名单用户弹窗 -->
    <el-dialog title="添加黑名单客户" :visible.sync="centerDialogVisible">
      <el-form :model="form">
        <el-form-item label="选择类型" :label-width="formLabelWidth">
          <el-select v-model="form.applyType" placeholder="请选择类型">
            <el-option label="申请手机号" value="applyPhone"></el-option>
            <el-option label="申请IP" value="applyIP"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详情信息" :label-width="formLabelWidth">
          <el-input v-model="form.applyContent" placeholder="输入IP或手机号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBL()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入时间戳
import moment from "moment";
import { mapMutations } from "vuex";
export default {
  name: "Blacklist",
  // 数据
  data() {
    return {
      currentUser: {
        currentName: "",
        currentId: "",
        currentLevel: "",
        currentPhone: ""
      },
      loading: true,
      showTimeKind: true,
      //提交表格的对象
      form: "",
      //时间区间隐藏状态
      isShow: false,
      //页码参数
      pageConfig: {
        currentPage: 1, //当前页
        pageSize: 10, //当前单页数据条数
        total: 0 //请求到的数据总条数
      },
      kindtimeList: [
        { id: "applyPhone", name: "申请手机号" },
        { id: "applyIP", name: "申请IP" }
      ],
      //客户筛选区域数据
      formLabelAlign: {
        applyType: "applyPhone", //黑名单类型
        applyContent: "" //备注内容
      },
      //禁用按钮的状态值
      disTBN: false,
      tableData: [],
      centerDialogVisible: false, //弹窗的显示和隐藏
      form: {
        applyType: "",
        applyContent: ""
      },
      formLabelWidth: "120px"
    };
  },
  methods: {
    //表格各行变色的方法
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    deleteRow(index, rows) {
      // console.log(rows[index].id);
      this.$confirm('此操作将该客户从黑名单移除, 是否继续?', '提示', {  confirmButtonText: '确定',  cancelButtonText: '取消',  type: 'warning'}).then(() => {
        this.$axios.post( `/spider/biacklist/delBlack?id=${rows[index].id}`)
        .then(res => {
          // console.log(res);
            if (res.data.messageModel.code == 0) {
              //判断当前不是第一页且为最后一页
              if (this.pageConfig.currentPage != 1 && this.pageConfig.currentPage == Math.ceil(this.pageConfig.total / this.pageConfig.pageSize)) {
                //当前页的客户数
                let currentPageNum = 0
                if (this.pageConfig.total % this.pageConfig.pageSize == 0) {
                  currentPageNum = this.pageConfig.pageSize
                }else if (this.pageConfig.total % this.pageConfig.pageSize != 0) {
                  currentPageNum = this.pageConfig.total % this.pageConfig.pageSize
                  //判断选中的客户数与当前页的客户数是否相等
                  if (currentPageNum == 1) {
                    this.pageConfig.currentPage -= this.pageConfig.currentPage
                  }
                }
              }
              this.$message({  type: 'success',  message: '删除成功!'});
              //获取黑名单List的方法
              this.getBMDList();
            }else{
              this.loading = false;
              this.$message.error(res.data.messageModel.messageText);
          //  this.clearAllCheck();
            }
            })
          .catch(error => {
            console.log(error);
        });
      }).catch(() => {
        this.$message({  type: 'info',  message: '已取消删除'});          
      });
    },
    //将按钮禁用十秒
    disButton() {
      this.disTBN = true;
      setTimeout(() => {
        this.disTBN = false;
      }, 1000);
    },
    //获取黑名单List的方法
    getBMDList() {
      //打开遮罩层
      // this.loading = true
      this.$axios
        .post(
          `/spider/biacklist/selBlack?applyType=${this.formLabelAlign.applyType}&applyContent=${this.formLabelAlign.applyContent}&currentPage=${this.pageConfig.currentPage}&pageSize=${this.pageConfig.pageSize}`
        )
        .then(res => {
          // console.log(res);
            if (res.data.messageModel.code == 0) {
              this.loading = false
              if (res.data.dataModel.total == 0) {
                 this.$message('抱歉，在黑名单中未找到该客户');
                 this.clearAllCheck();
                 this.tableData = []
                 this.pageConfig.total = res.data.dataModel.total;
                 return false;
              }
              this.$message.success("已为您找到以下黑名单客户");
              this.tableData = res.data.dataModel.list;
              this.pageConfig.total = res.data.dataModel.total;
            }else{
              this.loading = false;
              this.$message.error(res.data.messageModel.messageText);
          //     this.clearAllCheck();
            }
            })
          .catch(error => {
            console.log(error);
        });
    },
    //清空所有筛选条件的方法
    clearAllCheck() {
      for (let i = 0; i < this.formLabelAlign.length; i++) {
        this.formLabelAlign[i] = "";
      }
    },
    //判断时间种类是否禁用
    ChangeKind(vId) {
      let obj = {};
      obj = this.kindtimeList.find(item => {
        //这里的fenselectList就是上面遍历的数据源
        return item.id === vId; //筛选出匹配数据
      });
      // console.log(obj);
    },
    //分页的方法
    handleSizeChange(val) {
      // console.log(val);
      if (this.pageConfig.currentPage != 1) {
        this.pageConfig.currentPage = 1;
        this.pageConfig.pageSize = val;
        this.getBMDList();
      } else {
        this.pageConfig.pageSize = val;
        this.getBMDList();
      }
    },
    handleCurrentChange(val) {
      this.pageConfig.currentPage = val;
      this.getBMDList();
    },
    //添加黑名单客户
    addBL() {
      this.disButton();
      if (
        this.form.applyType == "" ||
        this.form.applyType == "undefined" ||
        this.form.applyType == undefined
      ) {
        this.$message.warning("请选择新增条件");
        return false;
      } else if (
        this.form.applyType == "applyPhone" &&
        this.form.applyContent != ""
      ) {
        // 判断手机号是否合法
        const flag = /^[1][3,4,5,7,8,9][0-9]{9}$/;
        if (flag.test(this.form.applyContent)) {
          //test方法,返回值为布尔型
          console.log(this.form.applyContent);
        } else {
          this.$message.warning("请有效的手机号码");
          return false;
        }
      } else if (
        this.form.applyType == "applyIP" &&
        this.form.applyContent != ""
      ) {
        //判断IP是否合法
        var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;  
        var reg = this.form.applyContent.match(exp);  
        if(reg==null)  {  
          this.$message.warning("请有效的IP地址");
          return false;
        }
      }
      this.$axios
        .post(
          `/spider/biacklist/addBlack?applyType=${this.form.applyType}&applyContent=${this.form.applyContent}`
        )
        .then(res => {
          // console.log(res);
            if (res.data.messageModel.code == 0) {
              this.getBMDList();
              
              this.centerDialogVisible = false;
              this.$message.success("成功添加黑名单客户");
            }else{
          this.loading = false;
              this.$message.error(res.data.messageModel.messageText);
              // this.clearAllCheck();
            }
            })
          .catch(error => {
            console.log(error);
        });
    },
    //编辑
    handleEdit(index, row) {
      let CusId = row.id;
      // 编程式导航
      this.$router.push({ path: "/myCusEdit", query: { CusId: CusId } });
      window.sessionStorage.setItem("CusId", CusId);
    },
    //查询
    checkCus() {
      this.disButton();
      if (this.formLabelAlign.applyType == "") {
        this.$message.warning("请选择查询条件");
        return false;
      } else if (
        this.formLabelAlign.applyType == "applyPhone" &&
        this.formLabelAlign.applyContent != ""
      ) {
        // 判断手机号是否合法
        const flag = /^[1][3,4,5,7,8,9][0-9]{9}$/;
        if (flag.test(this.formLabelAlign.applyContent)) {
          //test方法,返回值为布尔型
          console.log(this.formLabelAlign.applyContent);
        } else {
          this.$message.warning("请有效的手机号码");
          return false;
        }
      } else if (
        this.formLabelAlign.applyType == "applyIP" &&
        this.formLabelAlign.applyContent != ""
      ) {
        //判断IP是否合法
        var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;  
        var reg = this.form.applyContent.match(exp);  
        if(reg==null)  {  
          this.$message.warning("请有效的IP地址");
          return false;
        }
      }
      this.pageConfig.currentPage = 1;
      this.getBMDList();
    },
  },
  // 本地过滤器
  filters: {
    formatTime(value) {
      if (value == null) {
        return "";
      }
      return moment(value).format("YYYY-MM-DD HH:mm:ss");
    },
    remarksPanKong(value) {
      if (value == "null") {
        return "";
      }
      return value;
    },
    panDuanType(value) {
      if (value == "applyPhone") {
        return "手机黑名单";
      }else if (value == "applyIP") {
        return "IP黑名单";
      }else{
        return value;
      }
    },
  },
  created() {
    if (window.sessionStorage.getItem("prohibitLogin") == "true") {
      this.currentUser.currentName = window.sessionStorage.getItem("name");
      this.currentUser.currentid = window.sessionStorage.getItem("id");
      this.currentUser.currentLevel = window.sessionStorage.getItem(
        "userLevel"
      );
      //通过level判断行政人员不可以进入客户页面
      if (this.currentUser.currentLevel == 16) {
        //行政 showXingZheng
        this.$router.push("OnSiteCustomer");
      }
      if (this.currentUser.currentLevel == 17) {
        //合规
        this.$router.push("CallRecords");
      }
      if (this.currentUser.currentLevel == 11) {
        //财务
        this.$router.push("FinExamine");
      }
      //通过level判断行政人员不可以进入客户页面结束
      this.getBMDList();
    } else {
      this.$message.warning("请先进行登录操作！");
      this.$router.push("login");
    }
    //回车触发查询事件
    // let component = this
    // document.onkeydown = function (e) {
    //   var key = window.event.keyCode
    //   if (key === 13) {
    //     component.checkCus()
    //   }
    // }
  },
  activated() {
    this.getBMDList();
  }
};
</script>

<style  lang='scss'>
// 在填充数据之前隐藏
[v-cloak] {
  display: none;
}
.Blacklist-container {
  input.el-input__inner {
    width: 170px;
    height: 32px;
    padding-left: 10px;
  }
  //突出隔行的颜色差异
  .el-table {
    font-size: 12px;
    .cell {
      padding: 2px 2px;
      line-height: 16px;
    }
    th {
      padding: 0;
    }
    th.is-sortable {
      .cell {
        text-align: center;
      }
    }
    .warning-row {
      background: #fff;
    }
    .success-row {
      background: #d3d3d3;
    }
    td {
      //取消单元格的上下padding
      padding: 0;
      border-bottom: 1px solid rgb(211, 205, 205);
      border-right: 1px dashed #d3cdcd;
    }
    .el-button--mini {
      border: 0;
      padding: 5px 15px;
      margin: 5px 0;
      background: rgba(255, 255, 255, 0.01);
    }
    .toEdit:hover {
      color: skyblue;
    }
  }
  // 时间分类框样式
  input.el-input__inner#kinds,
  /deep/input.el-input__inner#time {
    width: 85px;
    padding-left: 7px;
    height: 32px !important;
  }
  // 日期选择器
  daterange.el-input,
  .el-date-editor--daterange.el-input__inner,
  .el-date-editor--timerange.el-input,
  .el-date-editor--timerange.el-input__inner {
    width: 240px;
    height: 36px;
    vertical-align: middle;
    .el-date-editor .el-range__icon {
      line-height: 27px;
    }
    .el-date-editor .el-range-separator {
      width: 5%;
    }
    /deep/.block,
    #block {
      border: none !important;
      /deep/.el-date-editor--daterange {
        width: 240px !important;
      }
    }
  }
  .el-form-item {
    display: inline-block;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 0;
  }
  .el-select.time {
    margin-left: 20px;
  }
  .el-input--suffix .el-input__inner.fanwei {
    padding-right: 30px;
    width: 30px;
  }
  .filterCondition {
    background-color: #fff;
    margin-bottom: 20px;
    .el-form-item#btnList {
      /deep/.el-form-item__content {
        margin-left: 20px !important;
      }
    }
  }
  .check {
    margin-left: 22px;
    padding: 10px 20px;
  }
  .ell {
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    word-break: normal;
    text-indent: -2em;
    margin: 0 0 0 2em;
    line-height: 1.2;
  }
  //分页框样式设置（避免页面被覆盖）
  .el-pagination .el-input__inner {
    width: 100px;
  }
}
</style>